<template>
	<div class="echarts">
		<div class="task_risk_tab" v-if="!btnhidden">
			<div class="task_risk_btn">
				<div class="look_hand" :class="{on:btnIndex==0}" @click="changeBtn(0)">按公司查看</div>
				<div class="look_hand" :class="{on:btnIndex==1}" @click="changeBtn(1)">按区域查看</div>
			</div>
		</div>
		<div class="bar-echarts-box" ref="barEcharts" :style="chartStyle" :id="barid"></div>
		<span class="nodata" :style="chartStyle" v-show="barx.length<=0">暂无数据</span>
    <div class="x-axis-tip"  ref="XAxisTip" v-show="isXAxisTipShow"></div>
	</div>
</template>

<script>
	export default {
		name: 'EchartsComponent',
		data() {
			return {
				myChart: null,
				btnIndex: 0,
				chartStyle: {
					width: 'calc(100% - 130px)'
				},
        isXAxisTipShow:false,
				legend: ['I级风险', 'II级风险', 'III级风险', 'IV级风险'],
				end: 100
			}
		},
		props: ['barid', 'barx', 'bary', 'btnhidden', 'bartype'],
		created() {
			if (this.btnhidden) {
				this.chartStyle = {
					width: '100%'
				}
			}
		},
		mounted() {
			window.addEventListener('resize', () => {
				if (this.myChart) {
					this.myChart.resize();
				}

			})
			if (this.barx.length > 0) {
				this.initCharts()
			}
		},
		watch: {
			barx(val) { //监听数据发生改变 刷新图表数据
				if (this.myChart) {
					this.myChart.dispose()
				};
				if (this.barx.length > 0) {
					this.initCharts();
				}

			},
		},
		methods: {
			changeBtn(btnIndex) {
				this.btnIndex = btnIndex;
				this.$emit("barbtnchange", btnIndex);
			},
			initCharts() {
				this.myChart = this.$echarts.init(this.$refs.barEcharts);
				let option = {};
				if (this.bartype != 2) {
					option = {
						dataZoom: [ //给x轴设置滚动条
							{
								start: 0, //默认为0
								end: 3 / this.barx.length * 100, //默认为100
								type: 'slider',
								show: this.barx.length > 3,
								xAxisIndex: [0],
								handleSize: 0, //滑动条的 左右2个滑动条的大小
								height: 8, //组件高度
								left: '10%', //左边的距离
								right: '10%', //右边的距离
								bottom: -1, //下边的距离
								borderColor: "#000",
								fillerColor: '#385290',
								borderRadius: 10,
								backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
								showDataShadow: false, //是否显示数据阴影 默认auto
								showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
								realtime: true, //是否实时更新
								filterMode: 'filter',
							},
							//下面这个属性是里面拖到
							{
								type: 'inside',
								show: this.barx.length > 3,
								xAxisIndex: [0],
								start: 0, //默认为1
								end: 3 / this.barx.length * 100, //默认为100
							},
						],
						color: ['#ED4C46', '#F49F42', '#EEDD78', '#3090B8'],
						legend: {
							data: this.legend,
							left: 'center',
							bottom: 5,
							itemWidth: 12,
							itemHeight: 12,
							itemGap: 15,
							textStyle: {
								color: '#fff',
							},
						},
						grid: {
							top: 20,
							x: 30,
							x2: 0,
							y2: 50
						},
						tooltip: {
							trigger: 'axis',
              position: function(point, params, dom, rect, size){
                  return [point[1],0];
              },
							axisPointer: {
								type: 'shadow'
							}
						},
						toolbox: {
							show: true,
							orient: 'vertical',
							left: 'right',
							top: 'center',

						},
						calculable: true,
						xAxis: [{
							type: 'category',
							axisTick: {
								show: false
							},
							triggerEvent: true,
							axisLabel: {
								show: true,
								interval: 0,
								// rotate:10, //代表逆时针旋转45度
								textStyle: {
									color: '#FFFFFF' //这里用参数代替了
								},
                formatter : function (value){
                   let valueTxt = '';
                   if (value.length > 10) {
                       valueTxt = value.substring(0, 10) + '...';
                   }
                   else {
                       valueTxt = value;
                   }

                   return valueTxt ;
                }
							},
							data: this.barx
						}],
						yAxis: [{
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#FFFFFF' //这里用参数代替了
								}
							},
							splitLine: { //改变横向网格线的颜色
								show: true,
								lineStyle: {
									color: ['#262D4F'],
									width: 1,
									type: 'solid'
								}
							},
							axisLine: {
								show: false
							},

						}],
						series: [{
								name: this.legend[0],
								type: 'bar',
								barWidth: 20,
								barGap: 0.2,
								data: this.bary.firstRisk,
								itemStyle: {
									normal: { //柱状图颜色
										// color:'#ff6600',
										label: {
											show: true, //显示文本
											position: 'top', //数据值位置
											textStyle: {
												fontSize: '10'
											}
										}
									}
								},
							},
							{
								name: this.legend[1],
								type: 'bar',
								barWidth: 20,
								barGap: 0.2,
								data: this.bary.secondRisk,
								itemStyle: {
									normal: { //柱状图颜色
										// color:'#ff6600',
										label: {
											show: true, //显示文本
											position: 'top', //数据值位置
											textStyle: {
												fontSize: '10'
											}
										}
									}
								},

							},
							{
								name: this.legend[2],
								type: 'bar',
								barWidth: 20,
								barGap: 0.2,
								data: this.bary.thirdRisk,
								itemStyle: {
									normal: { //柱状图颜色
										// color:'#ff6600',
										label: {
											show: true, //显示文本
											position: 'top', //数据值位置
											textStyle: {
												fontSize: '10'
											}
										}
									}
								},
							},
							{
								name: this.legend[3],
								type: 'bar',
								barWidth: 20,
								barGap: 0.2,
								data: this.bary.fourthRisk,
								itemStyle: {
									normal: { //柱状图颜色
										// color:'#ff6600',
										label: {
											show: true, //显示文本
											position: 'top', //数据值位置
											textStyle: {
												fontSize: '10'
											}
										}
									}
								},
							}
						]
					};
				} else {
          let total = 0,bary = [];
          this.bary.forEach(item=>{
            total+=item;

          })
          this.bary.forEach(item=>{
            bary.push(parseInt(item/total*100))
          })

					option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: { // 坐标轴指示器，坐标轴触发有效
								type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							},

              formatter: (params, ticket, callback)=> {
                return params[0].name+":"+ this.bary[params[0].dataIndex]+ " ("+params[0].value+"%)"
              }

						},
						grid: {
							top: 35,
							x: 60,
							x2: 30,
							y2: 35
						},
						xAxis: [{
							type: 'category',
							data: this.legend,
							axisTick: {
								alignWithLabel: true
							},
							axisLabel: {
								show: true,
								interval: 0,
								textStyle: {
									color: '#FFFFFF' //这里用参数代替了
								}
							},
						}],
						yAxis: [{
								type: 'value',
								axisLabel: {
									show: true,
									textStyle: {
										color: '#FFFFFF' //这里用参数代替了
									}
								},
								splitLine: { //改变横向网格线的颜色
									show: true,
									lineStyle: {
										color: ['#262D4F'],
										width: 1,
										type: 'solid'
									}
								},
							},

						],
						series: [{
							name: '在施风险',
							type: 'bar',
							barWidth: '20',
							data: bary,
							itemStyle: {
								normal: {
									color: function(params) {
										// build a color map as your need.
										var colorList = [
											'#ED4C46', '#F49F42', '#EEDD78', '#3090B8',
										];
										return colorList[params.dataIndex]
									},
									label: {
										show: true,
										position: 'top',
										formatter: '{c}%'
									}
								}
							},
						}]
					};
				}

				this.myChart.setOption(option);
        this.myChart.on('mouseover', params => {
              if( params.componentType == 'xAxis' && params.value.length>10 ){
                let clientX = params.event.event.offsetX;
                let clientY = params.event.event.offsetY;
                let xAxisTip = this.$refs.XAxisTip;
                xAxisTip.innerText = params.value;
                xAxisTip.style.left = clientX + document.documentElement.scrollLeft + "px";
                xAxisTip.style.top = clientY + document.documentElement.scrollTop + 10 + "px";
                this.isXAxisTipShow = true;
              }
        })
        this.myChart.on('mouseout', params => {
              if( params.componentType == 'xAxis' ){
                this.isXAxisTipShow = false;
              }
        })

				this.myChart.on('click', params => {
					if (params.componentType == "xAxis") {
						this.$emit("barclick", this.barx.indexOf(params.value), params.value);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.echarts {
		width: 100%;
		height: 100%;
		position: relative;

		.task_risk_tab {
			width: 118px;
			float: left;
			height: 100%;
			position: relative;

			.task_risk_btn {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}

			.look_hand {
				width: 118px;
				height: 41px;
				text-align: center;
				line-height: 41px;
				background-image: url('../../../../src/assets/images/bi/default_item.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				cursor: pointer;

				&:last-child {
					margin-top: 20px;
				}

				&.on {
					background-image: url('../../../../src/assets/images/bi/select_item.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					color: #32C6C4;
				}
			}
		}

		.bar-echarts-box {
			width: calc(100% - 130px);
			height: 100%;
			float: right;
		}

		.nodata {
			width: 100%;
			position: absolute;
			top: 50%;
			text-align: center;
			transform: translateY(-50%);
			float: right;
		}
    .x-axis-tip{
      position: absolute;
      padding: 0 5px;
      border-radius: 3px;
      box-shadow: 2px 2px 2px 0 #000;
      background: #fff;
      font-size: 12px;
      line-height: 18px;
      color: #575757;
      z-index:99999;
    }
	}
</style>
